<template>
  <div class="" style="height: 100%; width: 100%">
    <tongyongbasechart :options="options" ref="reffuhe" />
  </div>
</template>
<script>
export default {
  name: "zjnchart11",
  components: {},
  data() {
    return {
      options: {},
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.gongreliangzhanbi": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    let scale = this.$root.setting.scale;
    this.options = {
      title: {
        text: "",
        textStyle: {
          color: "#fff",
          fontSize: 36 * scale,
          fontWeight: "bold",
        },
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        textStyle: {
          fontWeight: "normal",
          fontSize: 30 * scale,
        },
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "60%"],
          hoverAnimation: true,
          color: ["#5957C2", "#76FBC0", "#FCC708", "#29C6FA"],
          data: [
            {
              value: 0, //表格中加载过了 所以不用再调用ajax
              name: "一号管网",
            },
            {
              value: 0,
              name: "二号管网",
            },
            {
              value: 0,
              name: "三号管网",
            },
            {
              value: 0,
              name: "四号管网",
            },
          ].sort(function (a, b) {
            return a.value - b.value;
          }),
          // roseType: 'radius',
          label: {
            normal: {
              textStyle: {
                fontSize: 30 * scale,
              },
              formatter: function (params, ticket, callback) {
                return (
                  "{white|" +
                  params.name +
                  "}\n{blue|" +
                  params.value +
                  "}{white|万㎡}"
                );
              },
              rich: {
                white: {
                  color: "#fff",
                  fontSize: 30 * scale,
                  padding: [10, 0],
                },
                blue: {
                  color: "#53F3F3",
                  fontSize: 32 * scale,
                },
              },
            },
          },
          labelLine: {
            normal: {
              length: 30 * scale,
              length2: 50 * scale,
              lineStyle: {
                width: 5,
              },
            },
          },
        },
      ],
    };
  },
  methods: {
    loadData(n) {
      let scale = this.$root.setting.scale;
      this.options.series[0].data = [];
      //m_012qc
      n.map((item) => {
        this.options.series[0].data.push({
          value: Number(Math.abs(Number(item["m_012qc"])) / 10000).toFixed(2),
          name: item.name,
        });
      });
      this.options.series[0].data.sort(function (a, b) {
        return a.value - b.value;
      }),
        this.$refs.reffuhe.myChart.setOption(this.options);
      // this.options
    },
  },
};
</script>
<style lang='scss' scoped>
</style>